// 引入html-webpack-plugin
var htmlWP = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',   //指定打包的入口文件(需要打包的文件,  路径+文件名)
    output: {
        // __dirname  是查找当前所在文件的绝对路径
        path: __dirname+'/dist',    // 输出文件的路径(绝对路径, 使用  __dirname + 路径)
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,       //打包 .css文件
                loader: 'style-loader!css-loader'    // css-loader是将后缀为.css的文件转换成样式代码； 再用style-loader将样式代码插入到标签里面去;
            },
            {
                test: /\.scss$/,      // 表示当前要打包文件的后缀正则表达式
                loader: 'style-loader!css-loader!sass-loader'   // 实现sass文件的打包
            },
            {
                test: /\.less$/,     // 打包 .less文件
                loader: 'style-loader!css-loader!less-loader'
            },
            {
                test: /\.(png|jpg|gif|ttf|svg)$/,
                loader: 'url-loader?limit=20000'   //limit表示图片的大小为20K是临界值，小于20K的图片均被打包到build.js中去，请求图片就会很快
                            // limit单位是字节 1kb = 1024b(字节)
                            // 对于比较小的图片资源可以使用limit进行限制 
                            // 小于limit值转换成base64字符串内嵌到js代码中
                            // 大于limit值的图片才转成URL进行网络请求
            },

            //由于webpack2.0以上版本本身已经支持es6转es5语法了，所以这个地方的配置是可以删除掉了
            /* {
                test: /\.js$/,     // 将.js文件中的es6语法转成es5语法
                loader: 'babel-loader',
                exclude: /node_modules/   // 排除node_modules文件夹下的js文件不用被转换
            }, */
            {
                test: /.vue$/,     // 解析 .vue 组件页面文件
                loader: 'vue-loader',
            },
            {
                test: /vue-preview.src.*?js$/,     // vue-preivew组件专用
                loader: 'babel-loader'
            }
        ]
    },

    //由于webpack2.0以上版本本身已经支持es6转es5语法了，所以这个地方的配置是可以删除掉了
    /* // 配置babel的转码规则
    babel: {
        presets: ['es2015'],    // 配置将es6语法转换成es5语法
        plugins: ['transform-runtime']    // 这句代码就是为了解决打包.vue文件不报错
    }, */

    // 在modul.exports中加入
    plugins: [
        new htmlWP({
            title: '首页',  //生成的页面标题 <head><title>
            filename: 'index.html',    // webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'index1.html'    // 根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}